<template>
	<e-charts class="chart1" :option="option" />
	<e-charts class="chart1" :option="option1" />
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	import {
		elevatorAge
	} from "@/api"
	const option = ref(

	)
	const username = ref('')
	const r2 = () => {
		elevatorAge(username.value).then(r => {
			console.log(r)

			const pieData = Object.entries(r.data)
				.filter(([name, value]) => value !== 0) // 过滤掉值为0的项
				.map(([name, value]) => ({
					name,
					value
				}));
				

			option.value = {
				title: {
					text: '电梯年龄统计',
					left: 'center',
					textStyle: {
						color: '#ffffff',
						fontSize: 22
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)' // 添加百分比显示
				},
				legend: {
					top: '5%',
					left: 'center',
					textStyle: {
						color: '#ffffff' // 图例文字颜色
					}
				},
				series: [{
					name: '电梯使用年限', // 修改系列名称
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '18', // 调整为更合适的字号
							fontWeight: 'bold',
							color: '#333' // 强调状态文字颜色
						}
					},
					labelLine: {
						show: false
					},
					data: pieData, // 使用动态数据
					// 添加自定义颜色（可选）
					color: ['#5470C6', '#91CC75', '#FAC858']
				}]
			}

		})
	}
	onMounted(() => {
		username.value = localStorage.getItem('username')
		r2()
	})
</script>

<style>
	.chart1 {
		margin: 20px 0;
		height: 560px;
		width: 330px;
		align-items: center;
		/* background-color: pink; */
	}
</style>